<template>
	<!-- 修改手机号 -->
	<view class="content display  width-100 displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">设置手机号</text>
			</template>
		</u-navbar>
		
		<view class="content_all display width-100 displayColumn  all_item">
			<view class="fn_one display width_699  displayColumn displaycenter_jus M-T30">
				<view class="fn_one1 display ">
					<input type="number" class="input M-L24"  placeholder-class="input_pl" placeholder="请输入新的手机号"/>
				</view>
				<view class="input_code display  width_699 displaycenter_aliem M-T12">
					<input type="number" class="input M-L24"  placeholder-class="input_pl" placeholder="请输入验证码"/>
					<view class="wrap M-L20">
							<!-- <u-toast ref="uToast"></u-toast> -->
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"  @change="codeChange"></u-code>
							<!-- <u-button @tap="getCode"></u-button> -->
							<button class="display all_item fn_button fontSize font_comm" v-if="!flag" @tap="getCode">获取验证码</button>
							<button class="display all_item fn_button fontSize font_comm" v-else style="background: #72778A;color: #FFFFFF;">{{tips}}</button>
						</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="thre_button display  width_699 all_item" style="margin-top: 160rpx;">
				
				<button class="display all_item  fontSize font_comm fn_button2" style="background: #126BC9;" v-if="!flag" >确认修改</button>
				<button class="display all_item  fontSize font_comm fn_button2" v-else>确认修改</button>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					tips: '',
				seconds: 3,
				flag:false,
			}
		},
		methods: {
			
			codeChange(text) {
							this.tips = text;
						},
						getCode() {
							if(this.$refs.uCode.canGetCode) {
								// 模拟向后端请求验证码
								uni.showLoading({
									title: '正在获取验证码'
								})
								setTimeout(() => {
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									uni.$u.toast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								}, 2000);
							} else {
								uni.$u.toast('倒计时结束后再发送');
							}
						},
						end() {
							uni.$u.toast('倒计时结束');
							this.flag = false;
						},
						start() {
							uni.$u.toast('倒计时开始');
							this.flag = true;
						}
		}
	}
</script>

<style scoped lang="scss">
.fn_one{
	height: 172rpx;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	.fn_one1{
		span{
			font-weight: 600;
			font-size: 28rpx;
			color: #212121;
		}
		
	}
}
.input{
	width: 402rpx;
	height: 72rpx;
	background: #F6F6F6;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #000;
	padding-left: 20rpx;
}
.input_pl{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
	padding-left: 20rpx;
	
}
.fn_one1{
	font-weight: 600;
	font-size: 28rpx;
	color: #212121;
}
.fn_button{
	width: 220rpx;
	height: 72rpx;
	background: #126BC9;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 600;
	font-size: 28rpx;
	color: #FFFFFF
}
.fn_button2{
	width: 690rpx;
	height: 84rpx;
	background: #72778A;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	font-weight: 600;
	font-size: 28rpx;
	color: #FFFFFF;
}
</style>
